<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表白墙</title>

  <style>

    *{
      /*消除浏览器的默认样式*/
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .container{
      width: 1000px;

      margin: 20px auto;
    }

    h1{
      text-align: center;
    }


    p{
      text-align: center;
      color: #494646;
      margin: 20px;
    }



    .row {
      display: flex;
      height: 40px;
      justify-content: center;
      align-items: center;
      margin: 10px;
    }

    .row span{
      width: 80px;
    }

    .row input{
      width: 200px;
      height: 30px;
    }

    .row button{
      width: 300px;
      height: 30px;
      color: #ffffff;
      background-color: orange;
      border: none;

      border-radius: 5px;
    }

    .row button:active{
      background-color: #534c4c67;
    }


  </style>
</head>
<body>
<div class="container">
  <h1 >表白墙</h1>
  <p>输入内容后点击提交，信息会显示到下方表格中</p>

  <div class="row">
    <span>谁：</span>
    <input type="text">
  </div>
  <div class="row">
    <span>对谁：</span>
    <input type="text" >
  </div>
  <div class="row">
    <span>说：</span>
    <input type="text">
  </div>

  <div class="row">
    <button id="submit">提交</button>
  </div>


  <div class="row">
    <button id="revert">撤销</button>
  </div>
</div>



<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script>
  //实现提交操作，点击提交，把用户输入的内容提交到页面上显示

  let containerDiv = document.querySelector('.container');
  let inputs = document.querySelectorAll('input');
  let button = document.querySelector('button');

  button.onclick = function(){
    //获取到三个输入框的内容
    let from = inputs[0].value;
    let to = inputs[1].value;
    let msg = inputs[2].value;
    if (from == '' || to == '' || msg == '') {
                return;
    }


    let rowDiv = document.createElement('div');
    rowDiv.className = 'row';
    rowDiv.innerHTML = from + '对'+to+'说:'+msg;
    containerDiv.appendChild(rowDiv);


    //清空操作
    for(let input of inputs){
      input.value = '';
    }

    //新增一个给服务器发起一个post请求，把上述数据提交到服务器
    //定义一个js对象，类似于json的键值对
    // 这里的body只是一个js对象，而不是字符串
    // 与此同时要注意的是，网络传输只能传字符串，而不能传对象
    let body = {
      "from" :from,
      "to":to,
      "message" : msg
    };
    //要将json转化成字符串 js内置了json转化的库
    //把js对象转化成字符串
    strBody = JSON.stringify(body);
    console.log("strBody: "+strBody);
    $.ajax({
      type:'post',
      url:'message',
      data:strBody,
      contentType:"application/json; charset=utf8",
      success: function(body){
        console.log("数据发布成功");
      }
    });
  }



  let revertButton = document.querySelector('#revert');
  revertButton.onclick = function(){
    //删除最后一条消息 
    // 选中所有row，找到最后一个row，然后删除
    let rows = document.querySelectorAll('.message');
    if(rows == null || rows.length == 0){
      return;
    }
    containerDiv.removeChild(rows[rows.length - 1]);
  }


  //新增在页面加载时，发送get请求，从服务器获取数据并添加到页面上
  $.ajax({
    type:'get',
    url:'message',

    success:function(body){
      //此处拿到的body是一个js对象数组 
      // 本来服务器返回的是一个json格式的字符串，但jquery的ajax能自动识别 
      // 自动把json字符串转化成js对象数组 
      // 遍历这个数组，把元素取出来，构造到页面中即可
     let container = document.querySelector('.container');

      for(let message of body){
        //针对每个元素构造div
          let rowDiv = document.createElement('div');
          rowDiv.className = 'row';
          rowDiv.innerHTML = message.from + '对'+message.to+'说:'+message.msg;
          containerDiv.appendChild(rowDiv);
      }
    } 
  });


</script>
</body>
</html>